<template>
    <div class="hotbrands">
        <div class="box">
            <div class="brand">
                <div class="car">
                    <div v-for="item in hotBrands" :key="item.id">
                        <div class="image">
                            <img :src="item.src" alt=""><br>
                        </div>
                        <span>{{ item.text }}</span>
                    </div>
                </div>
            </div>
            <div class="price">
                <div v-for="item in price" :key="item.id">
                    <span>{{ item.text }}</span>
                </div>
            </div>
            <div class="endurance">
                <div v-for="item in endurance" :key="item.id">
                    <span>{{ item.text }}</span>
                </div>
            </div>
            <div class="category">
                <div v-for="item in category" :key="item.id">
                    <span>{{ item.text }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup () {
        let hotBrands = [
            {
                id:1,
                src:require('../../../assets/新能源/热门品牌1.png'),
                text:'奔驰'
            },
            {
                id:2,
                src:require('../../../assets/新能源/热门品牌2.png'),
                text:'保时捷'
            },
            {
                id:3,
                src:require('../../../assets/新能源/热门品牌3.png'),
                text:'Polestar极星'
            },
            {
                id:4,
                src:require('../../../assets/新能源/热门品牌4.png'),
                text:'比亚迪'
            },
            {
                id:5,
                src:require('../../../assets/新能源/热门品牌5.png'),
                text:'特斯拉'
            }
        ]
        let price = [
            {
                id:1,
                text:'价格'
            },
            {
                id:2,
                text:'5万以下'
            },
            {
                id:3,
                text:'5-8万'
            },
            {
                id:4,
                text:'12-18万'
            },
            {
                id:5,
                text:'18万以上'
            }
        ]
        let endurance = [
            {
                id:1,
                text:'续航'
            },
            {
                id:2,
                text:'200-300'
            },
            {
                id:3,
                text:'300-400'
            },
            {
                id:4,
                text:'400-500'
            },
            {
                id:5,
                text:'500以上'
            }
        ]
        let category = [
            {
                id:1,
                text:'类别'
            },
            {
                id:2,
                text:'纯电动'
            },
            {
                id:3,
                text:'插电混动'
            },
            {
                id:4,
                text:'SUV'
            },
            {
                id:5,
                text:'自主品牌'
            }
        ]
        return {
            hotBrands,
            price,
            endurance,
            category
        }
    }
})
</script>

<style scoped>
.hotbrands{
    background-color: #F8F9FD;
    width: 100%;
    height: 500px;
}
.hotbrands .box{
    background-color: white;
    border-radius: 20px;
    margin: auto;
    width: 96%;
    height: 300px;
}
.hotbrands .box .brand .car{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.hotbrands .box .brand .car .image{
    display:flex;
    justify-content: center;
    align-items: center;
}
.hotbrands .box .brand .car .image img{
    width: 50px;
    height: 50px;
    margin: auto;
}
.hotbrands .box .brand .car span,.hotbrands .box .price span,.hotbrands .box .endurance span,.hotbrands .box .category span{
    font-size: 30px;
}
.hotbrands .box .price,.hotbrands .box .endurance,.hotbrands .box .category{
    width: 94%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}
</style>